<template>
  <div>
    <el-form :model="form" :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="form.patientName" @keyup.enter.native="search" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone" @keyup.enter.native="search" />
      </el-form-item>
      <el-form-item label="建档时间">
        <el-date-picker v-model="form.date" type="daterange" range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="dateChange" />
      </el-form-item>
      <el-form-item label="医院">
        <el-select v-model="form.hospitalId" @change="hospitalChange">
          <el-option v-for="item in hospitalData" :label="item.hospitalName" :value="item.id" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="search" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="openDialog" class="add">新增患者</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column type="index" :index="indexMethod(1)" label="序号" width="55px" align="center" />
      <el-table-column prop="patientName" label="姓名" width="100px" align="center" />
      <el-table-column prop="phone" label="手机号" width="130px" align="center" />
      <el-table-column prop="gender" label="性别" width="55px" align="center" />
      <el-table-column prop="age" label="年龄" width="55px" align="center" />
      <el-table-column prop="hospitalName" label="医院" align="center" />
      <el-table-column prop="startTime" label="建档时间" align="center" />
      <el-table-column prop="doctorName" label="医生" align="center" />
      <el-table-column prop="remark" label="备注" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <a href="#" @click.prevent="handleEdit(scope.row)">患者信息</a>
          <a href="#" @click.prevent="handleTest(scope.row)">开始测评</a>
          <a href="#" @click.prevent="handleReport(scope.row)">测评报告</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="form.pageNum" v-model:page-size="form.pageSize" :page-sizes="[5, 10, 15, 20]"
        background layout=" prev, pager, next, sizes, jumper,total" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>


    <!-- 新增确认患者信息弹窗 -->
    <el-dialog v-model="dialogVisible" title="请确认该患者无以下禁忌症" width="500" align-center center
      :before-close="closedDialog">
      <div style="margin-left: 50px;">
        <div class="patientDesc">1.盲人、单眼或者双眼明显萎缩</div>
        <div class="patientDesc">2.严重白内障、青光眼、红眼病、眼睛相关组织严重炎症</div>
        <div class="patientDesc">3.视网膜脱落、其它影响检测的眼科疾病</div>
        <div class="patientDesc">4.以及影响正常检测的其它身体疾病的患者不能使用本产品</div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closedDialogs">否</el-button>
          <el-button type="primary" @click="addPatient">
            是
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>
<script setup lang="ts">
    import { ref, reactive,  onMounted } from "vue";
    import { useRouter } from "vue-router";
    import { useStore } from "vuex";
    import {getHospitalList,getPatientList} from "@/api/patient/index";
    // import {hospitalResponse,patientParams,patientListResponse} from "@/api/patient/type";
    import {IPatientParams,IHospitalResultType} from '@/types/patient'
    import {IPatientListResponse,IHospitalResponse} from '@/types/api'
import { IPatientListRecodesType } from '@/types/patient'
import { ElMessage } from 'element-plus'
    const indexMethod = (index: number) => {
        return index;
    };
    const store = useStore();
const router = useRouter();
const dialogVisible = ref(false)
    const form: IPatientParams = reactive({
        patientName: "",
        phone: "",
        hospitalId: "", 
        pageSize: 10,
        pageNum: 1,
        date:'',
        startDate:'',
        endDate:'',
    });
    //时间选择器
    const dateChange=(val:any)=>{
       if(val){
        form.startDate = val[0]
        form.endDate =val[1]
       }else{
        form.startDate=''
        form.endDate =''
       }
        getPatients(form)
    }
    // 获取患者信息列表数据
    const getPatients = async (value: IPatientParams) => {
        const res: IPatientListResponse = await getPatientList(value);
        tableData.value = res.data.result.records;
        tableData.value.forEach((item:IPatientListRecodesType) => {
            if (item.gender == 1) {
                item.gender = "男";
            } else {
                item.gender = "女";
            }
        });
        total.value = Number(res.data.result.total);
    };
    //患者信息
let tableData = ref<IPatientListRecodesType[]>([]);
const openDialog = () => {
  dialogVisible.value = true;
}
const closedDialog = () => {
  dialogVisible.value = false;
}
const closedDialogs = () => {
  ElMessage({
    message: '此项测评不适用有禁忌症的患者',
    type: 'warning',
  })
  dialogVisible.value = false;
}
    //点击新增患者按钮
    const addPatient = () => {
        store.commit("updateTitle", "新增患者");
        router.push("addPatient");
    };
    //重置
    const reset = () => {
        form.patientName = "";
        form.phone = "";
        form.hospitalId = "";
        form.pageNum = 1;
        form.pageSize = 10;
        form.date =''
        form.startDate=''
        form.endDate =''
        getPatients(form);
    };
    //搜索
    const search = () => {
        form.patientName = form.patientName.trim();
        form.phone = form.phone.trim();
        if(form.date && form.date !== ''){
            form.startDate = form.date[0] 
            form.endDate = form.date[1] 
        }
        getPatients(form);
    };
    //点击患者信息
    const handleEdit = ( item: IPatientListRecodesType) => {
        store.commit("updateTitle", "患者信息");
        router.push({ path: "patientMessage", query: { patientId: item.id } });
    };
    //分页数据
    const total = ref(0);
    const handleSizeChange = (val: number) => {
        form.pageSize = val;
        form.pageNum = 1;
        getPatients(form);
    };
    const handleCurrentChange = (val: number) => {
        form.pageNum = val;
        getPatients(form);
    };
    const hospitalChange = (id: string) => {
        form.hospitalId = id;
        getPatients(form);
    };
    //开始测评
    const handleTest = ( item: IPatientListRecodesType) => {
        let params:any={}
        params.userName = item.patientName
        params.age = item.age
        params.patientId = item.id
        if(item.gender == '男'){
            params.sex='male'
        }else if(item.gender == '女'){
            params.sex='female'
        }else{
            params.sex ='other'
        }
        router.push({
            path:'/startTest',
            query:params
        });
    };
    //测评报告
    const handleReport = (item: IPatientListRecodesType) => {
        router.push({ path: "/eyeTrackingRecord", query: { patientId: item.id } });
    };
    //获取医院数据
    const hospitalData = ref<IHospitalResultType[]>([]);
    onMounted(async () => {
        const res: IHospitalResponse = await getHospitalList();
        hospitalData.value = res.data.result;
        // getPatients(form);
        store.commit("updateTitle", "患者信息管理");
    });
    onMounted(() => {
        getPatients(form);
    })
</script>
<style lang="scss" scoped>
  .demo-form-inline .el-input {
    --el-input-width: 140px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 160px;
  }

  :deep(.el-form-item__label) {
    color: black;
    font-size: 18px;
    font-weight: 400;
  }

  .search {
    background-color: rgba(22, 155, 213, 1);
    color: white;
  }

  .add {
    border-color: rgba(0, 0, 255, 1);
  }

  a {
    display: block;
    text-decoration: none;
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
  }
  .patientDesc {
    font-size: 16px;
  }
</style>